<template>
	<view class="my-order" ref="container">
		<u-empty v-if="!info.length" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>
		<view class="list">
			<!-- -->
			<view class="item" v-for="(item, index) in info" :key="index">
				<view class="title acea-row row-between-wrapper">
					<view class="acea-row row-middle">
						<span class="sign cart-color acea-row row-center-wrapper" v-if="item.prizeType == 1">实物奖品</span>
						<span class="sign cart-color acea-row row-center-wrapper" v-if="item.prizeType == 2">优惠券</span>
						<span class="sign cart-color acea-row row-center-wrapper"
							v-if="item.prizeType == 2&&!item.yxStoreCoupon.type">平台券</span>
						<span class="sign cart-color acea-row row-center-wrapper"
							v-if="item.prizeType == 2&&item.yxStoreCoupon.type==1">商家券</span>
						<span class="sign cart-color acea-row row-center-wrapper" v-if="item.prizeType == 3">零钱</span>

					</view>
					<view class="font-color-red">{{ $u.timeFormat(item.createTime,'yyyy-mm-dd hh:MM')}}</view>
					<view class="font-color-red" v-if="!item.status">待领取</view>
					<view class="font-color-red" v-if="item.status == 1 || item.status == 2">已领取</view>
					<view class="font-color-red" v-if="item.status == 3">已过期</view>
					<!-- materialStatus: 待发货0 待收货1 已完成2 -->
					<template
						v-if="item.prizeType == 1 && item.status == 1">（{{materialStatusMap[item.materialStatus]}})</template>
				</view>
				<view>
					<view class="item-info acea-row row-between row-top">
						<view class="pictrue" v-if="item.prizeType == 1">
							<!-- 这里展示奖品图片，可能是卡券，商品，零钱 -->
							<image :src="item.prizeImage" />
						</view>
						<view class="text acea-row row-between" :style="[{'width':item.prizeType == 1?'':'100%'}]">
							<view class="name line2">{{ item.prizeName }}</view>
							<view class="money">
								<view>
									￥{{item.prizeType == 2?item.yxStoreCoupon.couponPrice:item.prizePrice}}
								</view>
								<!-- <view>x1</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="totalPrice">
					<text>有效期</text> <text class="money font-color-red"
						style="margin-left: 15rpx;">{{ $u.timeFormat(item.validity,'yyyy-mm-dd hh:MM')}}</text>
				</view>
				<view class="acea-row row-right bottom row-middle" style="padding: 15rpx 30rpx;height: initial; ">
					<view v-if="item.prizeType == 2&&item.yxStoreProductList&&item.yxStoreProductList.length"
						style="width: 100%;">
						<view class="acea-row row-between"
							style="width: 100%;font-size: 14px;line-height: 33px;height: 60rpx;margin-bottom: 10rpx;"
							v-for="(item1,index1) in item.yxStoreProductList" :key="index1">
							<view class="">
								<image :src="item1.image" style="width: 60rpx;height: 60rpx;" mode=""></image>
							</view>
							<view class="font-over">
								{{item1.storeName}}
							</view>
							<view class="">
								<view class="bnt cancelBnt" @click="goUse(item1)"
									v-if="item.prizeType == 2 && item.status == 1">去使用</view>
							</view>
						</view>
					</view>

					<template>
						<view class="bnt cancelBnt" @click="goGoods()"
							v-if="item.prizeType == 2 && !item.yxStoreProductList && item.status == 1">去使用</view>
						<view class="bnt cancelBnt" @click="goLogistics(item)"
							v-if="item.prizeType == 1 && item.materialStatus && (item.status == 1 || item.status == 2)">
							查看物流</view>
						<view class="bnt bg-color-red" @click="toReceive(item)" v-if="!item.status">领取</view>
					</template>
				</view>
			</view>
		</view>

		<!-- 抽中实物 -->
		<view class="pic-back box2" v-if="isPrize">
			<view>
				<image src="https://qny.yijiumy.com/pic_zjbj_an.png" @click="isPrize = false"
					style='width: 50rpx;height: 50rpx;position: absolute;right: 30rpx;top: 125rpx;' mode=""></image>
				<image style="height: 1150rpx;width: 100%;" src="https://qny.yijiumy.com/pic_zhongjiangbeij.png"
					mode=""></image>

				<view class="prize-box" style="height: 700rpx; top: 400rpx;">
					<view class="prize-name">
						奖品:{{data.prizeName}}
					</view>
					<view class="prize-img">
						<image :src="data.prizeImage" mode=""></image>
					</view>
					<view class="address">
						<view style="line-height: 70rpx;">
							请选择收获地址
						</view>
						<view class="border-box" @click="addressTap">
							<image v-if="!addressInfo.id" class="push" src="https://qny.yijiumy.com/push.png" mode="">
							</image>
							<view v-if="addressInfo.id">
								<view class="address-details">
									<view class="addressInfo">
										{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}
									</view>
									<view class="realName">
										{{addressInfo.realName}}
									</view>
									<view class="phone">
										{{addressInfo.phone}}
									</view>
								</view>
								<view class="font">
									{{addressInfo.detail}}
								</view>
								<view class="font">
									门牌号：{{addressInfo.houseNumber}}
								</view>
							</view>
						</view>
					</view>
					<view class="once">
						<view class="img">
							<img src="https://qny.yijiumy.com/pic_ljlq.png" alt="" />
						</view>

						<text @click="receive">立即领取</text>

					</view>
				</view>
			</view>
		</view>
		<AddressWindow @checked="changeAddress" @redirect="addressRedirect" v-model="showAddress"
			:checked="addressInfo.id" ref="mychild"></AddressWindow>
	</view>
</template>
<script>
	import {
		getWinningRecords
	} from "@/api/business";
	import Loading from "@/components/Loading";
	import AddressWindow from "@/components/AddressWindow";
	import {
		prizedraw,
		reward,
	} from "@/api/business"
	export default {
		name: "CashRecord",
		components: {
			Loading,
			AddressWindow
		},
		props: {},
		data: function() {
			return {
				info: [],
				where: {
					page: 0,
					size: 10,
				},
				isPrize: false,
				showAddress: false,
				addressInfo: {},
				data: {},
				loaded: false,
				loading: false,
				materialStatusMap: {
					0: '待发货',
					1: '待收货',
					2: '已完成'
				}
			};
		},
		mounted: function() {
			this.getIndex()
		},
		onReachBottom() {
			this.loading === false && this.getIndex();
		},
		methods: {
			goGoods() {
				this.$yrouter.push({
					path: '/pages/shop/GoodsList/index',
				});
			},
			goUse(item) {
				this.$yrouter.push({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id: item.id
					}
				});
			},
			goLogistics(item) {
				this.$yrouter.push({
					path: '/userPack/pages/user/Logistics/index',
					query: {
						deliverySn: item.deliverySn,
						deliveryId: item.deliveryId
					}
				});
			},
			//领取实物
			receive() {
				if (!this.addressInfo.id) return uni.showToast({
					title: '请选择收获地址',
					icon: "none"
				});
				reward({
					addressId: this.addressInfo.id,
					id: this.data.id
				}).then(res => {
					this.where.page = 0
					this.isPrize = false
					this.info = []
					this.addressInfo = {}
					this.getIndex()
					uni.showToast({
						title: '领取成功',
						icon: "none"
					});
				})
			},
			//选择收获地址
			changeAddress(addressInfo) {
				this.addressInfo = addressInfo;
			},
			//列表领取
			toReceive(item) {
				if (item.prizeType == 1) {
					this.data = item
					this.isPrize = true
				} else {
					reward({
						id: item.id
					}).then(res => {
						this.where.page = 0
						this.info = []
						this.getIndex()
						uni.showToast({
							title: '领取成功',
							icon: "none"
						});
					}).catch(err => {
						uni.showToast({
							title: err.msg,
							icon: "none"
						});
					})
				}
			},

			//隐藏选择地址
			addressRedirect() {
				this.addressLoaded = false;
				this.showAddress = false;
			},
			//唤起地址选择
			addressTap: function() {
				this.showAddress = true;
				if (!this.addressLoaded) {
					this.addressLoaded = true;
					this.$refs.mychild.getAddressList();
				}
			},
			//获取领奖列表
			getIndex: function() {
				let that = this;
				if (that.loading == true || that.loaded == true) return;
				that.loading = true;
				getWinningRecords(that.where).then(
					res => {
						that.loading = false;
						that.loaded = res.data.length < that.where.limit;
						that.where.page = that.where.page + 1;
						that.info.push.apply(that.info, res.data);
					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000
						});
					}
				);
			},
			// 跳转路由
			goRouter(url) {
				this.$yrouter.push({
					path: url
				});
			}
		}
	};
</script>
<style scoped lang="less">
	.font-over {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.pic-back {
		height: 100vh;
		overflow-x: hidden;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 20;
		background-color: rgba(0, 0, 0, 0.5);

		.prize-box {
			width: 85%;

			left: 7.5%;
			position: absolute;

			padding: 0 3%;

			.coupon {
				width: 374.4rpx;
				height: 450rpx;
				margin: auto;
				position: relative;

				.coupon-box {
					position: absolute;
					height: 338.16rpx;
					top: 0px;
					width: 100%;
					text-align: center;
					padding: 30rpx;

					.text {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 12px;
						color: #000000;
						line-height: 22rpx;
						margin: 30rpx 0 0;
					}

					.coupon-numder {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 42px;
						color: #9f2b45;
						margin-bottom: 62rpx;
					}

					.type {
						color: #fff;
						font-size: 12px;
					}
				}

				image {
					width: 374.4rpx;
					height: 338.16rpx;
				}
			}

			.hongbao {
				width: 280rpx;
				height: 450rpx;
				margin: auto;
				position: relative;

				.hongbao-numder {
					position: absolute;
					top: 65rpx;
					width: 100%;
					text-align: center;
					font-size: 27px;
					color: rgb(236, 102, 45);

				}

				image {
					width: 280rpx;
					height: 380rpx;
				}
			}

			.once {
				width: 400rpx;
				height: 110rpx;
				margin: auto;
				background-size: cover;
				position: relative;
				text-align: center;

				.img {
					img {
						width: 400rpx;
						height: 110rpx;
					}

					width: 400rpx;
					height: 110rpx;
					position: absolute;
					top: 0px;
				}

				text {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 26px;
					color: #333333;
					line-height: 33rpx;
					position: relative;
					text-align: center;
					background: linear-gradient(180deg, #FF8321 0%, #FF632A 99.6337890625%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					position: relative;
					z-index: 2;
					line-height: 100rpx;

				}
			}

			.address {
				height: 250rpx;
				width: 100%;
				margin-bottom: 70rpx;

				.address-details {
					display: flex;
					justify-content: space-between;
					color: rgba(60, 60, 60, 0.7);
					font-size: 14px;

					.addressInfo {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						width: 260rpx;
					}

					.realName {
						width: 130rpx;
						text-align: center;
					}

					.phone {
						width: 170rpx;
					}
				}

				.font {
					font-size: 15px;
					line-height: 28px;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					width: 550rpx;
				}

				.push {
					width: 60rpx;
					height: 60rpx;
				}

				.border-box {
					width: 100%;
					height: 180rpx;
					border: 1rpx #000 dashed;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

				}

			}

			.prize-img {
				width: 306rpx;
				height: 306rpx;
				background: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: auto;
				margin-bottom: 50rpx;

				image {
					width: 229rpx;
					height: 251rpx;
				}

				text-align: center;
			}

			.prize-name {
				text-align: center;
				line-height: 80rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #9f2b45;
			}
		}
	}
</style>